import React, { Component } from 'react';
import { Button, Form, Input,Radio } from 'antd';
import { REGISTER_OTHER } from '../../method/data.config.js';
import GVerify from '../../method/GVerify.jsx';
import MD5 from '../../method/md5.js';
import { connect } from 'react-redux';
import * as actions from '@pages/Home/store/action'
import { UserOutlined, KeyOutlined } from '@ant-design/icons';

class register_other extends Component {
      render() {
            const form = REGISTER_OTHER.form.from;
            const formItem = REGISTER_OTHER.form.formItem;
            const Keys = Object.keys(formItem);
            const method = {
                  username: <Input 
                  placeholder="请输入您的账号" 
                  style={{
                        marginBottom:"1vh",
                        height:"5vh"
                  }}
                  />,
                  password: <Input.Password 
                  placeholder="请输入新密码"
                  style={{
                        marginBottom:"1vh",
                        height:"5vh"
                  }}
                  />,
                  okPassword: <Input.Password 
                  placeholder="请确认您的密码"
                        style={{
                              marginBottom:"1vh",
                              height:"5vh"
                        }}
                  />,
                  submit: <Button 
                  type="primary" 
                  htmlType="submit"
                  block
                  style={{
                        borderRadius: "10px",
                        color: "#fff",
                        background: "rgb(81, 175, 230)",
                        height:"5vh",
                        marginBottom:"1vh",

                        }}
                  >注册</Button>,
            }
            return (
                  <Form
                        {...form}
                        onFinish={this.onFormCreateOk}
                        onFinishFailed={this.onFinishFailed}
                  >    
                        <div>
                              <Form.Item
                                   
                                    name='role'
                                    rules={[{ required: true, message: '请选择' }]}
                              >
                                    <Radio.Group>
                                          <Radio value={"Admin"}>管理员</Radio>
                                          <Radio value={"Boss"}>店主</Radio>
                                          <Radio value={"Client"}>客户</Radio>
                                    </Radio.Group>
                              </Form.Item>
                                                
                              {Keys.map((item, index) => {
                                    return (
                                          <Form.Item
                                                key={index}
                                                {...formItem[item]}
                                          >
                                                {method[item]}
                                          </Form.Item>
                                    )
                              })}
                        </div>
                  </Form>
            );
      };
    //注册
    onFormCreateOk = (values) => {
      this.props.tosendRegisterToRequest(values)
      this.props.cancelVisible()
   }
      
}
  const mapDispatchToProps = (dispatch) => ({
       //  获取获取数据
       tosendRegisterToRequest(values) {
          dispatch(actions.registeredRequest(values))
      },
      
     
  })
export default connect(null, mapDispatchToProps)(register_other);